<template>
	<view style="padding-bottom: 100rpx;">

		<u-form :model="form" ref="uForm">
			<view class="mode u-margin-top-20">
				<u-form-item :border-bottom="false" label="需求描述" label-width="200" label-position="top">
					<u-input placeholder="请输入需求描述" type="textarea" v-model="form.demand"></u-input>

				</u-form-item>
			</view>
			<view class="mode u-margin-top-20">

				<u-form-item :border-bottom="false" prop="address" label="所在区域" label-width="200" @click="go_city">

					<u-input v-model="form.address" input-align="right" placeholder="请选择房屋所在区域" type="select"
						@click="go_city" />

				</u-form-item>



				<u-form-item :border-bottom="false" prop="size" label="使用面积" label-width="200">
					<u-input v-model="form.size" input-align="right" placeholder="请输入房屋使用面积㎡" />
				</u-form-item>


				<u-form-item :border-bottom="false" label="房屋类型" label-width="200" label-position="top">

					<view class="u-flex">
						<view @click="current=index" v-for="(item,index) in sort" class="sort u-margin-right-30"
							:class="current==index?'change':''">
							{{item.txt}}
						</view>
					</view>
				</u-form-item>


				<u-form-item :border-bottom="false" prop="man" label="常住人口" label-width="200">

					<u-input v-model="form.man" input-align="right" placeholder="请输入常住人口" type="Number" />

				</u-form-item>


				<u-form-item :border-bottom="false" label="户型图" label-width="200" label-position="top">

					<upload ref="videoUpload" type="image" @uploaded="uploaded" :afterLoadUrl="form.image_url"
						background="#818DFF" borderRadius="20" iconColor="#fff" width="160" height="160" defaultLength="3"></upload>

				</u-form-item>


<!-- <u-form-item :border-bottom="false" label="图片诊断" label-width="200" label-position="top">

					<upload ref="videoUpload1" type="image" @uploaded="uploaded" :afterLoadUrl="form.image_url1"
						background="#818DFF" borderRadius="20" iconColor="#fff" width="160" height="160" defaultLength="3"></upload>

				</u-form-item> -->






			</view>

		</u-form>


		<view class="bottomFix">
		   <u-button @click="submit" type="primary" :custom-style="{width:'500rpx',background:'#FF5D39'}" shape="circle">提交</u-button>
		</view>
			
		<u-toast ref="uToast" />
		
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations,
		mapGetters
	} from 'vuex';
	import upload from "../../components/upload_img.vue";

	export default {
		computed: {
			...mapGetters(['city'])
		},
		components: {
			upload
		},
		watch: {
			city: {
				immediate: true,
				handler(v) {
					this.form.address = v
				}
			}
		},
		data() {
			return {
				form: {
					address: "",
					size: "",
					man: "",
					image_url: "",
					demand: '',

// image_url1:""
				},
				sort: [{
					txt: "精装房",
					state: 3
				}, {
					txt: "简装房",
					state: 2
				}, {
					txt: "毛坯房",
					state: 1
				}],
				current: 0,


				rules: {

					address: [{
						required: true,
						message: '请选择所在城市',
						// 可以单个或者同时写两个触发验证方式
						trigger: 'blur,change'
					}],


					size: [{
						required: true,
						message: '请输入房屋使用面积',
						// 可以单个或者同时写两个触发验证方式
						trigger: 'blur,change'
					}],


					man: [{
						required: true,
						message: '请输入常住人口',
						// 可以单个或者同时写两个触发验证方式
						trigger: 'blur,change'
					}],



				}
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onLoad() {

		},
		onShow() {

		},
		methods: {
			go_city() {
				uni.navigateTo({
					url: "/pages/city/index"
				})
			},

			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						if (!this.$refs.videoUpload.afterUploadImgList.length) {
							uni.$u.toast("请上传户型图")
							return
						}
						// if (!this.$refs.videoUpload1.afterUploadImgList.length) {
						// 	uni.$u.toast("请上传图片诊断")
						// 	return
						// }
						
						
						this.$u.post('/user/diagnosis', {
                            city:this.city,
							acreage:this.form.size,
							czrk:this.form.man,
							image:this.$refs.videoUpload.afterUploadImgList.join(","),
							demand:this.form.demand,
							state:this.sort[this.current].state
						}).then(res => {
                             this.$refs.uToast.show({
                             	title: '诊断成功,请耐心等待后台审核',
                             	type: 'success',
                             	back: true
                             })
						}).catch(err => {

						})
					} else {
						console.log('验证失败');
					}
				});
			},
			confirm(e) {
				console.log(e)
			}

		}
	}
</script>

<style>
	.u-form-item__message {
		text-align: right;
	}

	.sort {
		height: 60rpx;
		line-height: 60rpx;
		padding: 0 30rpx;
		border: 2rpx solid #333;
		box-sizing: border-box;
		border-radius: 50rpx;
		color: #333;
		text-align: center;
		display: table;
	}

	.change {
		border: 2rpx solid #818DFF;
		background: #818DFF;
		color: #FFFFFF;
	}
</style>
